//文件是gulp配置文件，文件名不能改变
//引入gulp包
const gulp =require('gulp')

//引入html任务
const htmlmin = require('gulp-htmlmin')
//引入css任务
const cssmin =require('gulp-cssmin')
//引入sass任务
const sass = require( 'gulp-sass' ) ( require ( 'sass' ) )
//引入js文件
const uglify=require('gulp-uglify')
//引入babel任务  让es6转换成es5
const babel=require('gulp-babel')
//引入删除任务
const del=require('del')
//引入server服务器任务
const server = require('gulp-webserver')
//执行压缩任务
const htmlHandler =function(){
    //表示从哪个目录开始执行任务
    return gulp.src('./src/**/*.html')
    //管道函数
    .pipe(htmlmin({
            removeComments: true,//清除HTML注释
            collapseWhitespace: true,//压缩HTML
            collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input 		checked />
            removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
            removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
            minifyJS: true,//压缩页面JS
            minifyCSS: true//压缩页面CSS 
    }))
    //打包任务执行完毕后放到./dist目录下
    .pipe(gulp.dest('./dist'))
}


//执行css文件
const cssHandler =function(){
    //表示从哪个目录开始执行任务
    return gulp.src('./src/sass/*.scss')
    //在压缩之前把sass转成css
    .pipe(sass())
    .pipe(cssmin())
    .pipe(gulp.dest('./dist/css'))
}

const jsHandler=function(){
    //表示从哪个目录开始执行任务
    return gulp.src('./src/js/*.js')
    .pipe(babel({
        presets: ['es2015']
    }))
     .pipe(uglify())
     .pipe(gulp.dest('./dist/js'))
}

//执行libs和img移动任务
const libsHandler = function(){
    return gulp.src('./src/libs/**')
    .pipe(gulp.dest('./dist/libs'))
}
const dataHandler =function(){
    return gulp.src('./src/data/**')
    .pipe(gulp.dest('./dist/data'))
}
const imgHandler = function(){
    return gulp.src('./src/img/**')
    .pipe(gulp.dest('./dist/img'))
}
//执行del删除任务
const delHandler = function(){
    return del(['./dist/'])
}

// 创建一个 webserver 任务
const serverHandler = function () {
    return gulp.src('./dist')
        .pipe(server({
            host: 'localhost',          // 配置打开浏览器的域名
            port: 2202,                 // 配置打开浏览器的端口号
            livereload: true,           // 自动刷新浏览器
            open: './index.html'  // 默认打开 dist 文件夹下的哪个文件
        }))
}

// 创建一个 watch 任务
const watchHandler =  function () {
    gulp.watch('./src/sass/**', cssHandler) 
    gulp.watch('./src/js/**', jsHandler)
    gulp.watch('./src/**/*.html', htmlHandler)
    gulp.watch('./src/libs/**', libsHandler)
    gulp.watch('./src/img/**', imgHandler)
    gulp.watch('./src/data/**',dataHandler)
}


// module.exports={
//     htmlHandler,
//     cssHandler,
//     jsHandler,
//     libsHandler,
//     imgHandler
// }
//批量执行任务
//`gulp` 在运行的时候会默认执行 `default` 任务
//异步执行任务`gulp.parallel()` 用于并行执行
// module.exports.default=gulp.parallel(htmlHandler,
//         cssHandler,
//         jsHandler,
//         libsHandler,
//         imgHandler
//         )
//同步执行任务
        // module.exports.default=gulp.series(
        //     htmlHandler,
        //     cssHandler,
        //     jsHandler,
        //     libsHandler,
        //     imgHandler
        // )
        module.exports.default=gulp.series(
            delHandler,
            module.exports.default=gulp.parallel(htmlHandler,
                                    cssHandler,
                                    jsHandler,
                                    libsHandler,
                                    imgHandler,
                                    dataHandler
                                    ),
            //必须保证打包完成后再开启服务，serverHandler自动刷新,watchHandler自动修改内容
            module.exports.default=gulp.parallel(serverHandler,watchHandler)
           
            )